<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <span>
        {{ type == "zh" ? "中文" : "English" }}
      </span>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh">中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { ArrowDown } from "@element-plus/icons-vue";
export default {
  components: {
    ArrowDown,
  },
  data() {
    return {
      type: "",
    };
  },
  methods: {
    handleCommand(data) {
      // console.log(this.$i18n)
      //改变语言类型
      //改变存储的语言类型
      localStorage.setItem("language", data);
      // 改变数据中的类型
      this.type = data;
      // 改变i18n中的类型
      this.$i18n.locale = data;
      ElMessage.success("设置成功");
    },
  },
  created() {
    // 获取存储的语言类型
    let data = localStorage.getItem("language");
    this.type = data ? data : this.$i18n.locale; //如果没有则获取i18n中的数据
  },
};
</script>

<style></style>
